<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>field_all_record</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

	function modify(obj){
		//向模态框传参数
		var tds = $(obj).parent().parent().parent().find("td");
		$("#fieldId").val(tds.eq(0).text());
		$("#fieldType").val(tds.eq(1).text());
		$("#fieldName").val(tds.eq(2).text());
		$("#fieldSize").val(tds.eq(3).text());
		$("#fieldPeople").val(tds.eq(4).text());
		$("#fieldRental").val(tds.eq(5).text());
	}
	
	function ajax_delete(obj){
		//获取当前场地信息的id
		var td = $(obj).parent().parent().find("td");
		var id = td.eq(0).text();
		$("#delete_ok").click(function(){
			
			td.remove();
			$.ajax({ 
				url: "field_delete?field.facilityId="+id,
				success: function(data){	
		      }});
		});
	}
	
	function rent(obj){
		//获取当前场地信息的id
		var td = $(obj).parent().parent().find("td");
		var id = td.eq(0).text();
		$.ajax({ 
			url: "field_rent?field.facilityId="+id,
			success: function(data){
				if(data == 1){
					//租用成功
					td.css("background-color","#FFF8DC");
					$("#rent_ok").text("取消");
					td.eq(6).find("button").find("a").text("取消");
				}else if(data == 2){
					//取消租用
					td.css("background-color","#FFFFFF");
					$("#rent_ok").text("租用");
					td.eq(6).find("button").find("a").text("租用");
				}
	      }});
		
	}
	
	function order(){
		$.ajax({ 
			url: "field_order",
			success: function(data){
				$("#order_table").find("tbody").append(data);
	      }});
	}
	//清空tbody内容
	function order_yes(){
		$("#order_table").find("tbody").empty();
	}
	
	
	$(function(){
		$("#btn_a").click(function () {
			var href=$(this).attr("href"); 
			var input = $("#searchinput").val();
			if(input == ""){
				input="no";
			}
			$(this).attr("href",href+input);
		}) 
	});


</script>
<body>
<%@include file = "../../navigationBar.jsp" %> 

	<div class="container">
		<div class="input-group" style="margin-top:30px">
			<input type="text" class="form-control input-lg" id="searchinput" placeholder="场地类型查找.....">
			<a href="field_search.action?field.field_type=" id="btn_a" class="input-group-addon btn btn-primary" style="width:100px">搜索</a>
			<a class="input-group-addon btn" data-toggle="modal" data-target="#myOrder" onclick="order()">我的订单</a>
		</div>
	</div>
	<div class="col-xs-10 col-xs-offset-1" style="margin-top:15px">
	   <table class="table table-hover" id="table">
	   			<tr>
	   				<th>ID</th>
	   				<th>场地类型</th>
	   				<th>场地名称</th>
	   				<th>场地大小</th>
	   				<th>人数上限</th>
	   				<th>租金额度</th>
	   				<th style="color:green">租用</th>
	   				<s:if test="'管理场地' in #session.rolePermission_name_list">
		   				<th style="color:blue">修改</th>
		   				<th style="color:red">删除</th>
	   				</s:if>
	   			</tr>
		   <s:iterator value="#session.allRecord" var="listname">
		   		<s:if test="#listname.field_mark == 1">
			   		<tr class="tr" style="background-color:#FFF8DC">
			   			<td><s:property value="#listname.facilityId"/></td>
			   			<td><s:property value="#listname.field_type"/></td>
			   			<td><s:property value="#listname.field_name"/></td>
			   			<td><s:property value="#listname.field_size"/></td>
			   			<td><s:property value="#listname.field_people"/></td>
			   			<td><s:property value="#listname.field_rental.rental_amount"/></td>
			   			<td><button onclick="rent(this)"><a>取消</a></button></td>
			   			<s:if test="'管理场地' in #session.rolePermission_name_list">
				   			<td><button data-toggle="modal" data-target="#myModal"><a href="javascript:void(0)" onclick="modify(this)">修改</a></button></td>
				   			<td><button onclick="ajax_delete(this)" data-toggle="modal" data-target="#deleteModal"><a>删除</a></button></td>
			   			</s:if>
			   		</tr>	
		   		</s:if>
		   		<s:else>
		   			<tr class="tr">
			   			<td><s:property value="#listname.facilityId"/></td>
			   			<td><s:property value="#listname.field_type"/></td>
			   			<td><s:property value="#listname.field_name"/></td>
			   			<td><s:property value="#listname.field_size"/></td>
			   			<td><s:property value="#listname.field_people"/></td>
			   			<td><s:property value="#listname.field_rental.rental_amount"/></td>
			   			<td><button onclick="rent(this)"><a>租用</a></button></td>
			   			<s:if test="'管理场地' in #session.rolePermission_name_list">
				   			<td><button data-toggle="modal" data-target="#myModal"><a href="javascript:void(0)" onclick="modify(this)">修改</a></button></td>
				   			<td><button onclick="ajax_delete(this)" data-toggle="modal" data-target="#deleteModal"><a>删除</a></button></td>
			   			</s:if>
			   			
			   		</tr>	
		   		</s:else>
		   </s:iterator>
	  	 </table>
	</div>
	<!-- 模态框（modifyModal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改场地
				</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" action="field_update" method="post">
					<input  hidden="hidden" name="field.facilityId" id="fieldId"></input>
				  <div class="form-group">
				    <label for="fieldType" class="col-sm-3 control-label">场地类型</label>
				    <div class="col-sm-9">
				      <s:select list="{'篮球场','足球场','羽毛球场','棒球场'}" id="fieldType" name="field.field_type" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="fieldName" class="col-sm-3 control-label">场地名称</label>
				    <div class="col-sm-9">
				      <input type="text" class="form-control" id="fieldName" name="field.field_name">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="fieldSize" class="col-sm-3 control-label">场地大小</label>
				    <div class="col-sm-9">
				      <s:select list="{'25','43','54','69'}" id="fieldSize" name="field.field_size"></s:select>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="fieldPeople" class="col-sm-3 control-label">人数上限</label>
				    <div class="col-sm-9">
				      <s:select list="{'20','30','50','100'}" id="fieldPeople" name="field.field_people"></s:select>
				    </div>
				  </div>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<input type="submit" value="提交更改"/>
					
				</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!-- 模态框（deleteModal） -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					删除场地中...
				</h4>
			</div>
			<div class="modal-body">
				确认删除场地
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button"  id="delete_ok" class="btn btn-primary" data-dismiss="modal" >
					确定
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!-- 模态框（orderModal） -->
<div class="modal fade" id="myOrder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					<s:property value="#session.user.username"/>我の订单！
				</h4>
			</div>
			<div class="modal-body">
				<table class="table" id="order_table">
					   <thead>
					      <tr>
					         <th>订单编号</th>
					         <th>场地编号</th>
					         <th>用户名</th>
					         <th>租用时间</th>
					         <th>租用金额</th>
					      </tr>
					   </thead>
					   <tbody>
					      
					   </tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" onclick="order_yes()" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" onclick="order_yes()" class="btn btn-primary" data-dismiss="modal" >
					确定
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>




</body>
</html>